<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库存移库</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .el-pagination {
            text-align: center;
        }
        #mvwareDetails li{
            float: left;
            width: 154px;
            padding-left: 30px;
            margin-bottom: 12px;
        }
        body .el-table th.gutter {
            display: table-cell !important;
        }
        .el-form-item__label {
            text-align: left;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-button type="warning" icon="el-icon-plus" @click="moveWareApplication">移库操作</el-button>
        </el-header>
    </el-container>
    <el-table
            ref="moveWarehouseTable"
            :data="moveWarehouseTable"
            border
            style="width: 100%">
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column label="移库单号">
            <template slot-scope="scope">
                <span >{{scope.row.mvNo}}</span>
            </template>
        </el-table-column>
        <el-table-column label="移出仓库">
            <template slot-scope="scope">
                <span >{{scope.row.mvOut}}</span>
            </template>
        </el-table-column>
        <el-table-column label="移入仓库">
            <template slot-scope="scope">
                <span >{{scope.row.mvIn}}</span>
            </template>
        </el-table-column>
        <el-table-column label="转移商品">
            <template slot-scope="scope">
                <span >{{scope.row.mvGoods}}</span>
            </template>
        </el-table-column>
        <el-table-column label="转移数量">
            <template slot-scope="scope">
                <span >{{scope.row.mvNumber}}</span>
            </template>
        </el-table-column>
        <el-table-column label="移库原因">
            <template slot-scope="scope">
                <span >{{scope.row.mvMark}}</span>
            </template>
        </el-table-column>
        <el-table-column label="移库负责人">
            <template slot-scope="scope">
                <span >{{scope.row.mvPerson}}</span>
            </template>
        </el-table-column>
        <el-table-column label="联系电话">
            <template slot-scope="scope">
                <span >{{scope.row.mvTel}}</span>
            </template>
        </el-table-column>
        <el-table-column label="移库时间">
            <template slot-scope="scope">
                <span >{{scope.row.mvTime}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-s-operation" @click="moveDetails(scope.$index,scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <!--移库详情-->
    <el-dialog title="移库详情" :visible.sync="wareDetailsVisible"  >
        <el-form :model="wareDetails" ref="wareDetails" v-if="wareDetails">
            <p>*移出库名：{{wareDetails.mvOut}}</p>
            <p>*转移商品名称：{{wareDetails.mvGoods}}</p>
            <el-table
                    ref="outWareDetails"
                    :data="outWareDetails"
                    border
                    v-if="outWareDetails"
                    style="width:100%">
                <el-table-column label="序号" type="index">
                </el-table-column>
                <el-table-column label="产品码">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomGoodsno}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomGoods}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出库库名">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出库货区">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomArea}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出库货架">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomShelves}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出库货位">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomCargoloca}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <p>*移入库名：{{wareDetails.mvIn}}</p>
            <el-table
                    ref="inWareDetails"
                    :data="inWareDetails"
                    border
                    v-if="inWareDetails"
                    style="width:100%">
                <el-table-column label="序号" type="index">
                </el-table-column>
                <el-table-column label="产品码">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomGoodsno}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomGoods}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库库名">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库货区">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomArea}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库货架">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomShelves}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库货位">
                    <template slot-scope="scope">
                        <span >{{scope.row.iomCargoloca}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <ul style="list-style: none" id="mvwareDetails">
                <li>负责人：{{wareDetails.mvPerson}}</li>
                <li>联系电话：{{wareDetails.mvTel}}</li>
                <li>移库时间：{{wareDetails.mvTime}}</li>
                <li>转移数量：{{wareDetails.mvNumber}}</li>
                <li>移库原因：{{wareDetails.mvMark}}</li>
            </ul>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelWareDetails">返回</el-button>
        </div>
    </el-dialog>
    <!--移库申请-->
    <el-dialog title="移库申请" :visible.sync="moveWareApplicationVisible"  width="85%">
        <el-form label-width="130px" :model="moveWareApplicationTable" ref="moveWareApplicationTable" >
            <template>
                <span>移出库名:</span>
                <el-select v-model="ware" placeholder="请选择" @change="selectWare(ware)">
                    <el-option
                            v-for="item in selectWares"
                            :key="item.id"
                            :label="item.wareName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <template>
                <el-form-item label="转移商品的名称：" style="margin-top: 10px;">
                    <el-input placeholder="请输入商品的名称" v-model="inputProductName" style="width: 200px" @change="changeProductName" ></el-input>
                </el-form-item>
            </template>
            <el-table
                    ref="outWareApplicationTable"
                    :data="outWareApplicationTable"
                    border
                    v-if="outWareApplicationTable"
                    style="width:100%">
                <el-table-column label="序号" type="index">
                </el-table-column>
                <el-table-column label="产品码">
                    <template slot-scope="scope">
                        <span >{{scope.row.productNo}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span >{{scope.row.productName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="仓库名称">
                    <template slot-scope="scope">
                        <span >{{scope.row.wareName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货区名称">
                    <template slot-scope="scope">
                        <span >{{scope.row.goodsName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货架编号">
                    <template slot-scope="scope">
                        <span >{{scope.row.shelveId}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货位编号">
                    <template slot-scope="scope">
                        <span >{{scope.row.cargoNo}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <template>
                <span>移入库名:</span>
                <el-select style="margin-top: 10px;" v-model="inWare" placeholder="请选择" @change="selectInWares(inWare)">
                    <el-option
                            v-for="item in selectInWare"
                            :key="item.id"
                            :label="item.wareName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <el-table
                    ref="inWareTable"
                    :data="inWareTable"
                    border
                    v-if="inWareTable"
                    style="width:100%;margin-top: 10px">
                <el-table-column label="序号" type="index">
                </el-table-column>
                <el-table-column label="产品码">
                    <template slot-scope="scope">
                        <span >{{scope.row.productNo}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span >{{scope.row.productName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库库名" >
                        <span  v-html="inWareName" v-if="inWareName"></span>
                </el-table-column>
                <el-table-column label="入库区域" width="150px">
                    <el-select v-model="inWareData.cargoArea" placeholder="请选择库区" @change="selectCargoArea(inWareData.cargoArea)" >
                        <el-option
                                v-for="item in inWareData.selectCargoArea"
                                :key="item.goodsNo"
                                :label="item.goodsName"
                                :value="item.goodsNo">
                        </el-option>
                    </el-select>
                </el-table-column>
                <el-table-column label="入库货架"  width="150px">
                    <el-select v-model="inWareData.inShelve" placeholder="请选择货架" @change="selectShelve(inWareData.inShelve)" >
                        <el-option
                                v-for="item in inWareData.selectInShelve"
                                :key="item.shelvesNo"
                                :label="item.shelvesNo"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-table-column>
                <el-table-column label="入库货位" width="150px">
                    <el-select v-model="inWareData.inCargo" placeholder="请选择货位"  @change="selectCargo(inWareData.inCargo)" >
                        <el-option
                                v-for="item in inWareData.selectInCargo"
                                :key="item.cargoNo"
                                :label="item.cargoNo"
                                :value="item.cargoNo">
                        </el-option>
                    </el-select>
                </el-table-column>
                <el-table-column label="状态" width="120px" >
                    <template slot-scope="scope" >
                        <el-button type="info" disabled v-if="scope.row.isInWareStatus==0" >未确认</el-button>
                        <el-button type="success" disabled  v-if="scope.row.isInWareStatus==1" >已移库</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="确认入库" width="120px" >
                    < <template slot-scope="scope">
                        <el-button type="success" icon="el-icon-check" v-if="scope.row.isInWareStatus==0" @click="confirmStorage(scope.$index,scope.row)"></el-button>
                    <el-button type="info" icon="el-icon-check" disabled  v-if="scope.row.isInWareStatus==1" ></el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-form :model="moveWareForm" ref="moveWareForm" :inline="true" style="padding-left: 150px;margin-top: 20px;">
                <el-form-item label="负责人：" prop="mvPerson" >
                    <el-input v-model="moveWareForm.mvPerson" ></el-input>
                </el-form-item>
                <el-form label-width="80px" :inline="true" >
                <el-form-item label="移库时间：" prop="mvTime" >
                    <div class="block">
                        <el-date-picker
                                v-model="moveWareForm.mvTime"
                                type="datetime"
                                placeholder="选择日期"
                                format="yyyy-MM-dd "
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="转移数量：" prop="mvNumber" >
                    <el-input v-model="moveWareForm.mvNumber" ></el-input>
                </el-form-item>
                <el-form-item label="移库原因：" prop="mvMark" >
                    <el-input type="textarea"  v-model="moveWareForm.mvMark" ></el-input>
                </el-form-item>
                <br>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('moveWareForm')">提交</el-button>
                    <el-button @click="resetForm('moveWareForm')">取消</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                //移库数据
                moveWarehouseTable:null,
                total:0,
                current:1,
                pageSize:10,
                //移库详情
                wareDetails:null,
                //移出仓库详情
                outWareDetails:null,
                //移入仓库详情
                inWareDetails:null,
                wareDetailsVisible:false,
                //移库申请
                moveWareApplicationVisible:false,
                //移出仓库
                selectWares:null,
                //移出仓库id
                ware:null,
                moveWareApplicationTable:null,
                outWareApplicationTable:null,
                inputProductName:null,
                //移入仓库
                selectInWare:null,
                inWare:null,
                inWareName:'',
                //移入仓库的数据
                inWareTable:'',
                inWareData: {
                    selectInCargo: '',
                    inCargo: '',
                    selectInShelve: '',
                    inShelve: '',
                    selectCargoArea: '',
                    cargoArea: '',
                },
                //是否入库
                isInWareStatus:'0',
                //出入库详情
                iomWarehouse:{
                    id:'',
                    iomGoodsno:'',
                    iomGoods:'',
                    iomName:'',
                    iomArea:'',
                    iomShelves:'',
                    iomCargoloca:'',
                    iomNo:'',
                    cargoId:''//货位id
                },
                //移库表单
                moveWareForm:{
                    mvNo:'',
                    mvOut:'',
                    mvIn:'',
                    mvGoods:'',
                    mvNumber:'',
                    mvMark:'',
                    mvPerson:'',
                    mvTel:'',
                    mvTime:'',
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
            }
        },
        methods: {
            loadPage(current) {
                this.current = current;
                axios.get("/moveWarehouse/" + current).then(value => {
                    if (value.data.code == 1) {
                        this.moveWarehouseTable = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.pageSize;
                    }
                });
            },
            //移库详情
            moveDetails(index,row){
                this.wareDetails=row
                this.wareDetailsVisible=true
                //移出仓库的信息
                axios.post("/outWarehouse" ,row).then(value => {
                    if (value.data.code == 1) {
                        this.outWareDetails = value.data.data[0].iomWarehouseList;
                    }
                });
                //移入仓库的信息
                axios.post("/inWarehouse" ,row).then(value => {
                    if (value.data.code == 1) {
                        this.inWareDetails = value.data.data[0].iomWarehouseList;
                    }
                });
            },
            cancelWareDetails(){
                this.wareDetailsVisible=false
            },
            //移库申请
            moveWareApplication(){
                this.moveWareApplicationVisible=true
            },
            //选中的仓库
            selectWare(wareDate){
                //根据仓库id获得货位表的数据
                axios.get("/moveWarehouse-cargo-warename-productName/"+wareDate+"/"+ this.inputProductName).then(value => {
                    if (value.data.code == 1) {
                        this.outWareApplicationTable = value.data.data;
                        this.inWareTable=this.outWareApplicationTable
                    }
                });
            },
            changeProductName(val){
                this.inputProductName=val;
                //根据商品名称和仓库获得货位表的数据
                axios.get("/moveWarehouse-cargo-warename-productName/"+this.ware+"/"+ this.inputProductName).then(value => {
                    if (value.data.code == 1) {
                        this.outWareApplicationTable = value.data.data;
                        this.inWareTable=this.outWareApplicationTable
                    }
                });
            },
            //表格刷新
            tableRefresh(){
                //刷新表格
                this.inWareTable=''
                this.$nextTick(()=>{
                    //赋值
                    this.inWareTable=this.outWareApplicationTable;
                })

            },
            //移入仓库
            selectInWares(val){
                //清空选中的货区值
                this.inWareData.cargoArea=null
                //清空选中的货架值
                this.inWareData.inShelve=null
                //清空选中的货位值
                this.inWareData.inCargo=null
                //获取该仓库对应的货区、货架和货位
                axios.get("/moveWarehouse-ware-cargoArea-shelve-cargo/"+val).then(value => {
                    if (value.data.code == 1) {
                        this.inWareName=value.data.data[0].wareName
                        this.inWareData.selectCargoArea=value.data.data[0].cargoAreaList;
                        this.tableRefresh();
                    }
                });
            },
            //入库区域选中时的变化
            selectCargoArea(val){
                //清空选中的货架值
                this.inWareData.inShelve=null
                //清空选中的货位值
                this.inWareData.inCargo=null
                var shelves=this.inWareData.selectCargoArea
                for (let i = 0; i < shelves.length ; i++) {
                    if (shelves[i].goodsNo==val){
                        //获得对应的货架
                        this.inWareData.selectInShelve=shelves[i].shelvesList;
                        break
                    }else {
                        this.$message("该货区不存在货架");
                    }
                }
                this.tableRefresh();
            },
            //货架选中时的变化
            selectShelve(val){
                this.inWareData.inCargo=null
                var cargo=this.inWareData.selectInShelve
                for (let i = 0; i < cargo.length ; i++) {
                    if (cargo[i].id==val){
                        //获得对应的货位
                        this.inWareData.selectInCargo=cargo[i].cargoList;
                        break
                    }else {
                        this.$message("该货架不存在货位");
                    }
                }
                this.tableRefresh();
            },
            //货位选中时的变化
            selectCargo(val){
                this.tableRefresh();
            },
            //处理出库数据
            dealOutWare(row){
                this.iomWarehouse.iomGoodsno=row.productNo;
                this.iomWarehouse.iomGoods=row.productName;
                this.iomWarehouse.iomName=row.wareName;
                this.iomWarehouse.iomArea=row.goodsName;
                this.iomWarehouse.iomShelves=row.shelveId;
                this.iomWarehouse.iomCargoloca=row.cargoNo;
                this.iomWarehouse.cargoId = row.cargoId
                //添加出库信息
                axios.put("/iomWarehouse-outWare/",this.iomWarehouse).then(value => {
                    if (value.data.code == 1) {
                        this.iomWarehouse = value.data.data;
                        //响应成功时进行入库添加
                        this.dealInWare(row)
                    }
                });
            },
            //处理入库数据
            dealInWare(row){
                this.iomWarehouse.iomName=this.inWareName;
                this.iomWarehouse.iomArea=this.inWareData.cargoArea;
                this.iomWarehouse.iomShelves=this.inWareData.inShelve;
                this.iomWarehouse.iomCargoloca=this.inWareData.inCargo;
                //添加入库信息
                axios.put("/iomWarehouse-inWare/",this.iomWarehouse).then(value => {
                    if (value.data.code == 1) {
                        this.iomWarehouse = value.data.data;
                        this.$nextTick(()=>{
                            //赋值
                            row.isInWareStatus=1
                        })
                        console.log(this.iomWarehouse);
                    }
                });
            },
            //确认入库
            confirmStorage(index,row) {
                //判断是否选择移出仓库
                if (this.ware==null||this.ware===''){
                    this.$message("未选择移出仓库！")
                }else if (this.inWareData.cargoArea==null||this.inWareData.inShelve==null||this.inWareData.inCargo==null){
                    this.$message("未选择货区或者货架或货位！")
                } else if (this.moveWareForm==null||this.moveWareForm===''){
                    this.$message("未填写移库详情信息！")
                } else {
                    this.$confirm('确认要移库吗？', '信息', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                      this.$message({
                            type: 'success',
                            message: '移库成功!'
                      });
                      //出库处理
                      this.dealOutWare(row)
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消移库'
                        });
                    });
                }
            },
            //新增移库信息
            submitForm(val){
                this.moveWareForm.mvGoods=this.iomWarehouse.iomGoods
                this.moveWareForm.mvNo=this.iomWarehouse.iomNo
                this.moveWareForm.mvOut=this.ware
                this.moveWareForm.mvIn=this.iomWarehouse.iomName
                axios.put("/moveWarehouse/",this.moveWareForm).then(value => {
                    if (value.data.code == 1) {
                        this.$message("移库信息添加成功！");
                        this.$refs[val].resetFields();
                        this.loadPage(this.current);
                        this.moveWareApplicationVisible=false
                    }
                });

            },
            resetForm(val){
                this.$refs[val].resetFields();
                this.loadPage(this.current);
                this.moveWareApplicationVisible=false
            }
        },
        mounted(){
            this.loadPage(1);
            //获取仓库信息
            axios.get("/moveWarehouse-ware").then(value => {
                if (value.data.code == 1) {
                    this.selectWares = value.data.data;
                    this.selectInWare = value.data.data;
                }
            });
            //获得货位表的数据
            axios.get("/moveWarehouse-cargo").then(value => {
                if (value.data.code == 1) {
                    this.outWareApplicationTable = value.data.data;
                    this.inWareTable=this.outWareApplicationTable
                }
            });
        }
    })
</script>
</body>
</html>